<template>
    <div ref="container"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { Chart, View } from '@antv/g2';
import { formatter } from 'element-plus';
import { v4 } from 'uuid';

const p = defineProps<{ data: [] }>()
const container = ref()
const tclass = v4()

const _chart = ref<View>()

onMounted(() => {
    const chart = new Chart({
        container: container.value,
        height: 200,
        padding: [55, 35, 35, 50],
        width: 280
    });

    chart.data(p.data);

    _chart.value = chart.interaction(tclass)
    start()
    _chart.value.render()

})


function start() {
    if (_chart.value) {

        _chart.value.scale('population', { nice: true });
        _chart.value.coordinate().transpose();
        _chart.value.interval({
            maxColumnWidth: 8,
            dodgePadding: 2,
            columnWidthRatio: 0
        }).position('day*count').color('day', ['l(90) 0:#0670F8 1:#34C7FC', 'l(90) 0:#FE8B16 1:#F84228', 'l(90) 0:#FCF100 1:#F5A300', 'l(90) 0:#FA76B7 1:#FB4099', 'l(90) 0:#50FE83 1:#1CDD5E']).style({

            radius: [7, 7, 0, 0],
        }).label('count', {
            style: {
                fill: '#fff',
                fontSize: 8,
                fontWeight: 'lighter',

            }
        })
        _chart.value.interaction('active-region').legend(false)
        _chart.value.axis('count', {
            grid: {
                line: {
                    type: 'line',
                    style: {
                        fill: '#CCCCCC',
                        lineDash: [2],
                        fillOpacity: 0.2,
                        stroke: '#CCCCCC',
                        strokeOpacity: 0.2
                    }
                }
            },
            label: {
                style: {
                    fill: '#fff',
                },
                formatter(text) {
                    return ''
                }
            },

        })
        _chart.value.axis('day', {
            label: {
                style: {
                    fill: '#fff',
                    fontSize: 8,
                },

            },
            subTickLine: null,
            tickLine: null,
            line: {
                style: {
                    fill: '#CCCCCC',
                    lineDash: [2],
                    fillOpacity: 0.2,
                    stroke: '#CCCCCC',
                    strokeOpacity: 0.2
                }
            }
        })
        _chart.value.annotation()
            .text({
                position: ['50%', '50%'],
                content: '全AC标签占比',
                style: {
                    fontSize: 14,
                    fill: '#ffffff',
                    textAlign: 'center',
                    fontFamily: 'FZZongYi-M05S'

                },
                offsetY: -65,
            })
        _chart.value?.tooltip({
            showTitle: false,
            showMarkers: false,
            itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}%</li>',
        });
    }

}

watch(() => p.data, () => {
    _chart.value?.changeData(p.data);
    _chart.value?.render();
})

</script>